<template>
	<navbar title="骓目文化Dream"></navbar>
	<view class="home-swiper" style="padding-bottom: 40rpx;">
  
		
		<view class="video">
			<view class="" v-if="video.type == 1">
				<view class="" v-if="!flag" @tap="flag = true">
					<image :src="video.banner"
						style="width: 100%;height: 400rpx;position: absolute;top: 0;left: 0;z-index: -1;"
						mode="aspectFill"></image>
					<view class=""
						style="width: 100%;height: 400rpx;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.5);">
						<image src="../../static/image/stop.png" style="width: 80rpx;height: 80rpx;"
							 ></image>
					</view>
				</view>
				<view class="" v-if="flag">
					<video :src="video.video" style="width: 100%;height: 400rpx;" autoplay></video>
				</view>
			</view>
			<view class="" v-if="video.type == 0">
				<image :src="video.banner" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
			</view>
		</view>
		<view class="content">
			<view class="title">
				精选产品
			</view>
			<view >
				<item :list="list"></item>
			</view>
			<view class="" style="margin-top: 48rpx;" @tap="problem">
				<image style="width: 100%;height: 180rpx;" src="../../static/image/issue.png" mode="aspectFill"></image>
			</view>
		</view>
		<movable-area class="movableArea" style="right: 20rpx;">
			<movable-view class="movableView" direction="vertical" x="120rpx" y="600"  :animation="false">
				<view>
					<button open-type="contact" style="padding: 0;margin: 0;background-color:transparent">
						<image src="../../static/image/kf.png" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
					</button>
				
				</view>
			</movable-view>
		</movable-area>
	</view>


	<tabbar :current="0"></tabbar>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { getHome } from '@/service/api/index'
	import item from './item'
	import { onLoad, onShareAppMessage, onShareTimeline, onReachBottom } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import matchList from '@/common/list/match.vue'
	import tabbar from '@/common/tabbar/index.vue'
	const flag = ref(false);

	// 列表
	let list = ref<any>([])
	const video = ref({}) as any

	onLoad(() => {
		// 获取首页数据
		getData()
	})
	const problem = () => {
		tools.navTo('/pagesA/problem/problem')
	}
	const getData = async () => {
		const res = await getHome("");
		list.value = res.msg.goods;
		video.value = res.msg.video;
		console.log(res)
	}

	onReachBottom(() => {

	})

	onShareAppMessage((res : { from; target }) => {
		if (res.from === 'button') {
			// 来自页面内转发按钮
			console.log(res.target)
		}
		return {
			title: '骓目文化Dream',
			path: 'pages/home/index'
		}
	})

	onShareTimeline(() => {
		var shareObj = {
			title: '骓目文化Dream'
		}
		return shareObj
	})
</script>

<style lang="scss" scoped>
	:deep(.home-swiper) {
		margin-top: 20rpx;


	}

	.video {
		width: 100%;
		height: 400rpx;
		position: relative;
		//background-color: rebeccapurple;
	}

	.content {
		padding: 48rpx 30rpx 0 30rpx;

		.title {
			font-weight: bold;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
	}
	.margin-top10{
			margin-top: 10upx;
		}
		.margin-top20{
			margin-top: 20upx;
		}
	.movableArea {
		position: fixed;
		top: 0;
		right:20upx;
		width:120upx;
		height:86%;
		z-index:15;
		pointer-events: none;//设置area元素不可点击，则事件便会下移至页面下层元素
		
		.movableView {
			pointer-events: auto;//可以点击
			width:100rpx;
			box-sizing: border-box;
		}
		.movableView_pos{
			width:90upx;
			background-color: rgba(255,255,255,0.5);
			border-radius:10upx;
			padding:10upx 5upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 2px 2px rgba(202, 202, 202, 0.35);
		}
		.movableView_icon{
			position: relative;
	
		}
	}
	.textColor{
		color: #333333;
	}
	.textck{
		display: block;
	}
	.size18{
		font-size: 18upx;
	}
	.textCen{
		text-align: center;
	}
	.image_size{
		width: 32rpx;
		height: 34rpx;
	}
</style>